<template>
  <div id="zxt">
    <a-config-provider prefixCls="zxt" :getPopupContainer="getPopupContainer">
      <a-button @click="confirm" type="primary">Add</a-button>
    </a-config-provider>
    <a-button @click="confirm" type="primary">Add</a-button>
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="qiankun-vue-children-3" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import { Modal } from "ant-design-vue";
import { ConfigProvider } from "ant-design-vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  mounted() {
    ConfigProvider.config({
      // prefixCls: "zxt",
    });
  },
  methods: {
    getPopupContainer(el, dialogContext) {
      if (dialogContext) {
        return dialogContext.getDialogWrap();
      } else {
        return document.getElementById("zxt");
      }
    },
    confirm() {
      Modal.confirm({
        title: "some info",
        content: "some info",
      });
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
